﻿@namespace Masa.Tsc.Web.Admin.Rcl.Pages.Apm.Services
@inherits ApmComponentBase

<div class="mx-4">
    <MCard Class="rounded-lg mt-4" Height="256" Style="border:solid #ccc 1px">
        <MCardSubtitle Class="d-flex">
            <div class="font-weight-black h6 ml-4 mt-2">@I18n.Apm("Chart.Latency")</div>
            <div class="ml-4">
                <SSelect Placeholder="@I18n.T("Service.Detail.MetricTypes")"
                         Items="metricTypes"
                         TItem="(MetricTypes,string)"
                         TValue="MetricTypes"
                         TItemValue="MetricTypes"
                         ItemText="item=>item.Item2"
                         ItemValue="item=>item.Item1"
                         Style="max-width:200px"
                         Class="my-auto mr-1"
                         Small
                         BackgroundColor="white"
                         @bind-Value="metricTypeChartData.MetricType" />
            </div>
        </MCardSubtitle>
        <MCardText>
            @if (!metricTypeChartData.ChartData.ChartLoading && metricTypeChartData.ChartData.HasChart)
            {
                <MECharts Option="@(metricTypeChartData.ChartData.Data)" Height="166" Style="@("width:100%")" />
            }
            else
            {
                <div>loading</div>
            }
        </MCardText>
    </MCard>
    <div class="d-flex pt-4">
        <div class="col-6 rounded-lg pa-0" style="border:solid #ccc 1px;height:340px">
            <MCard>
                <MCardSubtitle Class="font-weight-black h6 py-2">
                    @I18n.Apm("Chart.Throughput")
                </MCardSubtitle>
                <MCardText>
                    @if (!throughput.ChartLoading && throughput.HasChart)
                    {
                        <MECharts Option="@(throughput.Data)" Height="200" Style="@("width:100%")" />
                    }
                </MCardText>
            </MCard>
        </div>
        <div class="col-6 pa-0">
            <div style="border:solid #ccc 1px;height:340px" class="rounded-lg ml-4 ma-0">
                <MCard>
                    <MCardSubtitle Class="font-weight-black h6 py-2">
                        @I18n.Apm("Chart.Failed")
                    </MCardSubtitle>
                    <MCardText>
                        @if (!throughput.ChartLoading && throughput.HasChart)
                        {
                            <MECharts Option="@(failed.Data)" Height="200" Style="@("width:100%")" />
                        }
                    </MCardText>
                </MCard>
            </div>
        </div>
        @* <div class="col-4 pa-0">
            <div style="border:solid #ccc 1px;height:334px" class="rounded-lg ml-4 ma-0">
                <MCard>
                    <MCardSubtitle Class="font-weight-black h6 copy_text py-2">
                        @I18n.Apm("Chart.SpanKinds")
                    </MCardSubtitle>
                    <MCardText>
                        @if (!throughput.ChartLoading && throughput.HasChart)
                        {
                            <MECharts Option="@(failed.Data)" Height="200" Style="@("width:100%")" />
                        }
                    </MCardText>
                </MCard>
            </div>
        </div> *@
    </div>    
</div>